<juci-layout-with-sidebar>
	<div ng-controller="q3bspdemo">
		<h1 translate>Quake 3 Demo</h1>
		<!-- Common Utilities 
        <script type="text/javascript" src="./quake3/game-shim.js"></script>
        <script type="text/javascript" src="./quake3/gl-matrix-min.js"></script>
        <script type="text/javascript" src="./quake3/stats.min.js"></script>

        <script type="text/javascript" src="./quake3/main.js"></script>
        <script type="text/javascript" src="./quake3/q3bsp.js"></script>
        <script type="text/javascript" src="./quake3/q3shader.js"></script>
        <script type="text/javascript" src="./quake3/q3glshader.js"></script>
        <script type="text/javascript" src="./quake3/q3movement.js"></script>

        <link href="./quake3/q3demo.css" rel="stylesheet" type="text/css">
		-->
		<div id="viewport-frame">
            <canvas id="viewport" width="854" height="480" style="display: block;">
                Sorry, but your browser does not support WebGL or does not have it enabled.
                To get a WebGL-enabled browser, please see:<br>
                <a href="http://get.webgl.org/" target="_blank">
                    http://get.webgl.org/
                </a>
            </canvas>
            <div id="loading" style="display: none;">Geometry compiled, parsing collision tree...</div>
        <div id="stats" style="width: 80px; opacity: 0.9; cursor: pointer;"><div id="fps" style="padding: 0px 0px 3px 3px; text-align: left; background-color: rgb(0, 0, 34);"><div id="fpsText" style="color: rgb(0, 255, 255); font-family: Helvetica, Arial, sans-serif; font-size: 9px; font-weight: bold; line-height: 15px;">37 FPS (7-60)</div><div id="fpsGraph" style="position: relative; width: 74px; height: 30px; background-color: rgb(0, 255, 255);"><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 16.5px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 22.8px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 27.9px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.4px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 13.2px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 12px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 12.3px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 24.3px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.7px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 12px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 12px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 12.3px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 18.9px; float: left; background-color: rgb(17, 17, 51);"></span></div></div><div id="ms" style="padding: 0px 0px 3px 3px; text-align: left; display: none; background-color: rgb(0, 34, 0);"><div id="msText" style="color: rgb(0, 255, 0); font-family: Helvetica, Arial, sans-serif; font-size: 9px; font-weight: bold; line-height: 15px;">1 MS (0-29)</div><div id="msGraph" style="position: relative; width: 74px; height: 30px; background-color: rgb(0, 255, 0);"><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 29.85px; float: left; background-color: rgb(17, 51, 17);"></span></div></div></div></div>

        <div id="webgl-error" style="display: none; text-align: center; vertical-align: middle;">
            Sorry, but your browser does not support WebGL or does not have it enabled.<br>
            To get a WebGL-enabled browser, please see:<br>
            <a href="http://get.webgl.org/" target="_blank">
                http://get.webgl.org/
            </a>
        </div>

        <img style="display: none;" src="./quake3/vr_goggles_sm.png" id="mobileVrBtn">
        <img src="./quake3/fullscreen_sm.png" id="mobileFullscreenBtn">

	</div>
</juci-layout-with-sidebar>
